<template>
  <div class="main">
      <!-- 内容编辑区 -->
      <div class="editContent">
          <!-- 文本域 描述 -->
          <div class="mess">
              <textarea  v-model="message" @keydown="input" class="message">
              </textarea>
              <p><span>{{length}}</span>/<span>100</span></p>
          </div>
          <!-- 图片 -->
          <blockquote style="font-size:10px;margin:10px">按住shift | ctrl 可多选上传</blockquote>
          <div class="imageBox">

              <div class="once" v-for="(item,index) in imgs" :key="item.index">
                <!-- 删除按钮 -->
                <a @click="delImg(index)" href="javascirpt:;" class="del">X</a>
                <el-avatar style="border-radius: 0px;" :size="130"  @error="errorHandler">
                    <img width="100%" height="100%" :src="item"/>
                    <!-- <input type="file" class="loadImg"> -->
                </el-avatar>
              </div>
              <div class="once">
                <el-avatar style="border-radius: 0px;" :size="130"  @error="errorHandler">
                    <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
                    <input type="file" name="file" ref="addimg" @change="addImg" multiple class="loadImg">
                </el-avatar>
              </div>
            <p><span>{{imgs.length}}</span>/<span>12</span></p>
          </div>
      </div>

      <!-- 专辑标签 -->
      <div class="tag">
            <el-select size="mini" filterable  @change="addTag" style="width:90%" v-model="value1" multiple placeholder="请选择您发布的头像所属专辑 (最长可选3个) 当前版本不支持自定义专辑 (可搜索专辑)">
                <el-option style="z-index:1"
                v-for="item in options"
                :key="item.abId"
                :label="item.abName" 
                :value="item.abId">
                </el-option>
            </el-select>
            <el-popover 
                placement="bottom"
                width="200"
                trigger="click">
               <div>
                   专辑名称:<el-input v-model="taginfo.abName" style="heigth:10px;background:yellow"></el-input>
                   专辑描述:<el-input v-model="taginfo.abMess"></el-input>
                   <el-button type="warning" size="small" @click="createNewTag" style="margin-top:10px">创建</el-button>
               </div>
                    <el-button slot="reference" size="mini" style="margin-left:10px;font-size:15px" type="warning">+</el-button>
                </el-popover>
      </div>
      <!-- 权限区 -->
      <div class="authenction">
          <div class="s">
              <span>评论</span>
              <el-switch
                v-model="comment"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
          </div>
          <div class="s">
              <span>收藏</span>
              <el-switch
                v-model="collet"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
          </div>
          <div class="s">
              <span>已读须知</span>
              <el-switch
                v-model="read"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
          </div>
          <div style="float:right !important; !im" class="s">
              <el-button size="mini" @click="issue" type="warning">发布</el-button>
          </div>
      </div>
      <!-- 免责声明 -->
      <div class="liabi">
          <pre>
    免责声明： 
          请勿发表与 <el-tag size="mini" type="danger">色情</el-tag> <el-tag size="mini" type="danger">低俗</el-tag> <el-tag size="mini" type="danger">赌博</el-tag> <el-tag size="mini" type="danger">污秽他人</el-tag> 等等有关违反法律范围内的内容，否则一律自行承担，发布帖子会先由人工检测，在由AI检测
          所有的敏词汇会进行自动屏蔽，并且有可能会导致帖子无法发布等情况，如果错判可以进行申诉，如果违规多次账号可能会进行封停处理
          您上传的所有图片 本站都有权限为该图片添加相应的<strong>水印</strong>。
          </pre>
          <el-button size="mini" @click="selectAll" type="warning" style="margin-top:10px;">点击查看全部</el-button>
      </div>
  </div>
</template>

<script>
import qs from "qs"
export default {
    data(){
        return{
            message:"",
            length:0,
            imgs:[],
            comment:true,
            collet:true,
            read:false,
            taginfo:{
                abName:null,
                abMess:null
            },
            options:[
                {
                    abId: 1,
                    abName: "情头"
                },
                {
                    value: 2,
                    label: "黑头"
                },
                {
                    value: 3,
                    label: "男头"
                },
                {
                    value: 4,
                    label: "女头"
                },
                {
                    value: 5,
                    label: "漫头"
                },
                {
                    value: 5,
                    label: "卡通"
                }
            ],   
            value1: [7],

        }
    },
    methods:{
        addImg(){
            if(this.imgs.length>10){
                this.$alert("非会员最大图片为10张")
                return;
            }
            
            var file = this.$refs.addimg.files
            console.log(file)
            for(var i  = 0 ; i<file.length;i++){
                if(file[i].type.split("/")[0]!="image"){this.$alert("仅支持 jpg png gif 格式文件");return}
                let parm = new FormData();
                parm.append('file',file[i],file[i].name);
                parm.append('chunk','0')
                let config ={
                   headers: { 'Content-Type': 'multipart/form-data' }
                }
                this.$http.post("/file/uploadFile",parm,config).then(va=>{
                if(va!=null){
                    if(va.data.code==200){
                        this.imgs.push(va.data.data)
                    }else if(va.data.code==301){
                        this.$alert(va.data.message)
                        this.$router.push("/")
                    }else{
                        this.$alert(va.data.message)
                    }

                }

            })
          }
            
            
         
        },
        createNewTag(){
            var obj = {
                abName:this.taginfo.abName,
                abMess:this.taginfo.abMess
            }
            this.$http.put("/album/album",qs.stringify(obj)).then(va=>{
                this.$alert(va.data.message)
                console.log(va.data)
                if(va.data.code==200){
                      // 判断当前是否已经存在
                    // 创建专辑
                    var newTag = {
                        abId:va.data.data,
                        abName:this.taginfo.abName
                    }
                    this.options.push(newTag)
                    this.value1.push(va.data.data)
                }else if(va.data.code==204){
                    // 判断当前是否已经存在
                    if(this.value1.includes(va.data.data)){
                        return;
                    }
                    this.value1.push(va.data.data)
                }
            })
        },
        input(e){
            if(this.length > 100 && e.keyCode!=8){
                this.$alert("内容已满")
                return;
            }
                this.length = this.message.length
        },
        selectAll(){
            this.$alert(`
                免责声明：
                    请勿发表与 <strong>色情</strong> <strong>低俗</strong> <strong>赌博</strong> <strong>污秽他人</strong> 等等有关违反法律范围内的内容，否则一律自行承担，发布帖子会先由人工检测，在由AI检测
                    所有的敏词汇会进行自动屏蔽，并且有可能会导致帖子无法发布等情况，如果错判可以进行申诉，如果违规多次账号可能会进行封停处理
                    您上传的所有图片 本站都有权限为该图片添加相应的<strong>水印</strong>。
            
            `,{dangerouslyUseHTMLString:true})
        },
        delImg(index){
          this.$confirm('确认要删除该图片吗')
                .then(() => {
                    this.imgs.splice(index,1)
                    this.$alert("删除成功")

                })
            
        },
        issue(){
           
            if(this.read==false){
                this.$alert("请仔细阅读《免责声明》勾选已读须知后在进行发布，如勾选已读须知代表已经同意了免责规则，帖子所有责任由您自行承担")
                return;
            }
            if(this.value1.length<=0){
                this.$alert("必须选择一个专辑")
                return;
            }
            if(this.value1.length>3){
                this.$alert("专辑最多选择3张")
                return;
            }
            var img="";
            // 拼接图片
            for(var i = 0; i <this.imgs.length;i++){
                img+=this.imgs[i]+","
            }
            img=img.substr(0,img.length-1)
            var values=""
            // 拼接专辑
            for(var j = 0; j <this.value1.length;j++){
                values+=this.value1[j]+","

            }
             values=values.substr(0,values.length-1)
            var obj = {
                nodeMess:this.message,
                nodeImages:img,
                nodeTag:values,
                nodeCommentFlag:this.comment,
                nodeLike:this.collet?0:-1
            }
            this.$http.put("/node/putNode",qs.stringify(obj)).then(va=>{
                if(va!=null){
                    if(va.data.code==200){
                        this.$alert("发布成功")
                        // 提交收录
                        // 跳转到该帖子
                        this.$router.push("/detail/"+va.data.data)
                    }else{
                        this.$alert(va.data.message)
                        
                    }
                }
            })

        },
    
        addTag(){
            if(this.value1.length>2){
                this.$alert("最多选择3个标签")
                this.value1.splice(3)
                return;
            }
        }
    },
    created(){
       
        // 检查是否登录
        if(sessionStorage.getItem("TOKEN")==null||sessionStorage.getItem("TOKEN")==""){
            this.$router.push("/")
            this.$alert("请进行登录在发表文章")
        }
        // 初始化标签
        this.$http.get("/album/albums").then(va=>{
            if(va.data.code==200){
                this.options=va.data.data
            }
        })

    }
}
</script>

<style scoped lang="less">
    .main{
        width: 60%;
        height: 1200px;
        margin: 10px auto;
        .editContent{
            width: 100%;
            height: auto; 
            padding: 10px;
            // background: yellow;
            border: 1px solid #e0e0e0;
            position: relative;
            .mess{
                width: 100%;
                height: 100px;
                position: relative;
                .message{
                    width: 100%;
                    resize: none;
                    height: 100%;
                    background: #ebb563;
                    border-radius: 5px;
                    outline: none;
                    padding: 10px;
                    font-family: ht;
                    border: none;
                }
                p{
                    right: 10px;bottom: 10px;
                    position: absolute;
                 }
            }
            .imageBox{
                display: flex;
                width: 50%;
                margin-top: 10px;
                height: auto;
                flex-wrap: wrap;
                position: relative;
                p{
                    right: 10px;bottom: 10px;
                    position: absolute;
                
                }
                .once{
                    width: 130px;
                    height: auto;
                    // background: red;
                    position: relative;
                    margin-left: 10px;
                }
                .loadImg{
                    z-index: 223;
                    position: absolute;
                    top: 0;
                    left: 0;
                    cursor: pointer;
                    width: 100%;
                    height: 100%;
                    opacity: 0;
                }
                .del{
                    display: block;
                    position: absolute;
                    right: 5px;top:5px;
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    background: rgb(243, 31, 31);
                    text-align: center;
                    font-family: ht;
                    font-weight: bolder;
                    z-index: 224;
                }
            }
        
        }
        .authenction{
            width: 100%;
            margin-top: 10px;
            height: 50px;
            border: 1px solid #e0e0e0;
            padding: 10px;
            .s{
                float: left;
                margin-right: 10px;
            }
            span{
                margin-right:10px ;
                font-family: hw;
            }
        }
        .tag{
            width: 100%;
            margin-top: 10px;
            height: 50px;
            border: 1px solid #e0e0e0;
            padding: 10px;
            display: flex;
          
        }
        .liabi{
            width: 100%;
            margin-top: 10px;
            height: auto;
            border: 1px solid #e0e0e0;
             padding: 10px;
          
        }
    }
    pre{
        font-size: 15px;
        font-family: ht;
        border-left: 4px solid rgb(123, 241, 107);
    }

         @media  screen and (max-width: 1300px) {
        .main{
            width: 100% !important;
        }
        .imageBox{
            width: 100% !important;
            .once{
                width: 100px !important;
            }
        }
        pre{
            width: 100% !important;
            overflow: hidden;
            text-overflow: ellipsis;
        }
     }

</style>